<template>
  <div class="box detailBox">
    <van-nav-bar
      title="详情页"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="detailTop">
      <van-image
        width="150"
        height="260"
        :src="img"
      />
      <div class="detailTopRight">
        <h2>{{bookName}}</h2>
        <p>作者：{{author}}</p>
        <p class="detailIntroduction">简介：{{introduction}}</p>
      </div>
    </div>
    <div class="tips">
      评分：<van-rate v-model="value" />
    </div>
    <div class="detailMiddle">
      <div class="kind">类型：</div>
      <div class="wordCount">字数：</div>
      <div class="lastTime">上次更新时间：</div>
      <div class="status"></div>
      <div class="vote">票数</div>
    </div>
    <van-goods-action>
      <van-goods-action-button color="#ccc" text="加入书架" @click="$router.push('/shelf')" />
      <van-goods-action-button color="#979797" text="立即阅读" @click="$router.push('/reading')" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetail } from '@/api/request.js'
import Vue from 'vue'
import { NavBar, Image as VanImage, Rate, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'

Vue.use(NavBar)
Vue.use(VanImage)
Vue.use(Rate)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)

export default {
  data () {
    return {
      img: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
      bookName: '小径分岔的花园',
      author: '豪尔赫',
      introduction: '小说集，1941年出版，收短篇小说七篇。其中，小说集，1941年出版，收短篇小说七篇。其中，小说集，1941年出版，收短篇小说七篇。其中，小说集，1941年出版，收短篇小说七篇。其中，小说集，1941年出版，收短篇小说七篇。其中',
      value: 3
    }
  },
  mounted () {
    getDetail({
      id: this.$route.params.id
    }).then(data => {
      this.data = data.data.msg
      console.log(data)
      console.log(data.data.msg.img)
    })
  }
}
</script>

<style lang="scss">
.detailBox{
  .detailTop{
    margin: 10px;
    display: flex;
    justify-content: space-around;
    .detailIntroduction{
      width: 150px;
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
    }
  }
  .tips{
    margin-left: 30px;
    font-size: 25px;
  }
  .detailMiddle{
    display: flex;
  }
}
</style>
